window.onload = function () {
  // 1.轮播图
  var img = document.getElementById("img");
  var imgLiS = img.children;
  var width = imgLiS[0].children[0].offsetWidth;
  var left = document.getElementById("left");
  var right = document.getElementById("right");
  var slide = document.getElementById("slide");
  var slideLi = slide.children;
  var index = 1;

  right.onclick = function () {
    index++;
    img.style.left = -index * width + "px";
    if (index == 9) {
      index = 1;
      img.style.left = -index * width + "px";
    }
    for (var i = 0; i < slideLi.length; i++) {
      var num = index - 1;
      slideLi[i].className = "";
    }
    slideLi[index - 1].className = "red";
  };

  left.onclick = function () {
    index--;
    img.style.left = -index * width + "px";
    if (index == 0) {
      index = imgLiS.length - 2;
      img.style.left = -index * width + "px";
    }
    for (var i = slideLi.length - 1; i >= 0; i--) {
      var num = index - 1;
      slideLi[i].className = "";
      // console.log(num);
    }
    slideLi[index - 1].className = "red";
  };
  var timer = null;
  //自动轮播效果
  img.onmouseout = function () {
    timer = setInterval(function () {
      index++;
      img.style.left = -index * width + "px";
      if (index == 9) {
        index = 1;
        img.style.left = -index * width + "px";
      }
      for (var i = 0; i < slideLi.length; i++) {
        var num = index - 1;
        slideLi[i].className = "";
      }
      slideLi[index - 1].className = "red";
    }, 1000);
  };
  img.onmouseover = function () {
    clearInterval(timer);
  };
  setInterval(function () {
    index++;
    img.style.left = -index * width + "px";
    if (index == 9) {
      index = 1;
      img.style.left = -index * width + "px";
    }
    for (var i = 0; i < slideLi.length; i++) {
      var num = index - 1;
      slideLi[i].className = "";
    }
    slideLi[index - 1].className = "red";
  }, 1000);
  // 点击下方任意小圆点，切换到指定图片并且指定的小圆点高亮
  for (var i = 0; i < slideLi.length; i++) {
    //给每个小圆点的li添加自定义属性
    slideLi[i].num = i;
    slideLi[i].onclick = function () {
      for (var j = 0; j < slideLi.length; j++) {
        slideLi[j].className = "";
      }
      this.className = "red";
      img.style.left = -(this.num + 1) * width + "px";
    };
  }

  // 无痕滑动轮播图
  var box = document.getElementsByClassName("haohuo-swiper")[0];
  var ul = document.getElementById("ul");
  timer1 = setInterval(function () {
    // offsetLeft获取的是只读的，不带单位
    // -2代表速度，每20毫秒，ul的left向左滑-2px
    ul.style.left = ul.offsetLeft - 2 + "px";
    if (ul.offsetLeft == -4 * ul.children[0].offsetWidth) {
      ul.style.left = 0;
    }
  }, 20);
  ul.onmouseenter = function () {
    clearInterval(timer);
  };
  ul.onmouseleave = function () {
    timer1 = setInterval(function () {
      // offsetLeft获取的是只读的，不带单位
      // -2代表速度，每20毫秒，ul的left向左滑-2px
      ul.style.left = ul.offsetLeft - 2 + "px";
      if (ul.offsetLeft == -9 * ul.children[0].offsetWidth) {
        ul.style.left = 0;
      }
    }, 20);
  };

  var zhubao1 = document.querySelector(".zhubao1");
  zhubao1.onclick = function () {
    location = "./list.html";
  };
  var shopcar = document.querySelector(".shopcar");
  shopcar.onclick = function () {
    location = "./cart.html";
  };
};
